import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    DownOutlined
} from '@ant-design/icons';
import { Layout, Dropdown, Menu, Space, message } from 'antd';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import store from "../../store/index";
const { Header } = Layout;




const HomeHeader = () => {
    const [state, setState] = useState(store.getState());
    const Navigate = useNavigate()

    //改变全局状态的数据，控制菜单的折叠
    const changeStatus = () => {
        store.dispatch({
            type: "collapsed"
        })
    }
    //全局状态数据更新
    store.subscribe(() => {
        setState(state => {
            return store.getState()
        })
    })
    const quit = () => {
        localStorage.getItem("token")
        message.success("退出成功")
        Navigate("/login")
    }

    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <div onClick={quit}>点击退出</div>
                    ),
                }
            ]}
        />
    );

    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: changeStatus,
            })}
            <Dropdown overlay={menu} >
                <a onClick={(e) => e.preventDefault()}>
                    <Space>
                        {"欢迎您" + localStorage.getItem("adminname")}
                        <DownOutlined />
                    </Space>
                </a>
            </Dropdown>
        </Header>
    )
}
export default HomeHeader